<template>
  <div id="desPage">
    <div class="container">
      <div class="body">
        <div class="bodyTitle">64位DES加密解密</div>
        <div class="box">
          <div class="itemTitle">
            数据输入
          </div>
          <div class="item">
            <div class="itemText">加密或解密的文本(16进制):</div>
            <div class="itemValue">
              <textarea v-model="text"/>
            </div>
          </div>
          <div class="item">
            <div class="itemText">十六进制密钥输入:</div>
            <div class="itemValue">
              <input type="text" v-model="key"/>
            </div>
          </div>
          <div class="emptyLine"></div>
          <div class="itemTitle">
            结果展示
          </div>
          <div class="item">
            <div class="itemText">密文:</div>
            <div class="itemValue">
              <textarea disabled v-model="cipher"/>
            </div>
          </div>
          <div class="item">
            <div class="itemText">解密后的明文:</div>
            <div class="itemValue">
              <textarea disabled v-model="plaintext"/>
            </div>
          </div>
        </div>
      </div>
      <div class="operationNav">
        <div class="operationTitle">操作按钮</div>
        <button class="operationButton" @click="desEncrypt(text, key)" >DES加密</button>
        <button class="operationButton" @click="desDecrypt(text, key)">DES解密</button>
        <button class="operationButton" @click="clearInput">清空输入框</button>
        <button class="operationButton" @click="showEncryptProcess">查看加密过程</button>
        <button class="operationButton" @click="showDecryptProcess">查看解密过程</button>
        <div class="operationTitle">参考博客</div>
        <div class="operationLinkBox">
          <a class="operationLink" target="_blank" href="https://www.hankcs.com/security/des-algorithm-illustrated.html">DES算法实例详解</a>
        </div>
      </div>
      <Dialog ref="encryptDialog" :titleData="titleData" :bodyData="bodyData" @closeDialog="() => { this.showEncryptDialog = false }" v-if="showEncryptDialog"></Dialog>
    </div>
  </div>
</template>

<script>
import DESUtil from "../../utils/DESUtil";
import Dialog from "../../components/Dialog";

export default {
  name: "DESPage",
  components: {Dialog},
  data() {
    return {
      text: '0123456789ABCDEF',
      key: "133457799BBCDFF1",
      binaryText: null,
      binaryKey: null,
      pcSubstitutionKey: null,
      subKeyTable: null,
      subKeyCompressTable: null,
      ipSubstitutionText: null,
      cipher: null,
      plaintext: null,
      showEncryptDialog: false,
      bodyData: null,
      titleData: null,
    }
  },
  mounted() {
  },
  methods: {
    showEncryptProcess: function () {
      this.showEncryptDialog = true;
      this.titleData = 'DES加密详情';
      this.bodyData = DESUtil.des_encrypt(this.text, this.key).log;
    },
    showDecryptProcess: function () {
      this.showEncryptDialog = true;
      this.titleData = 'DES解密详情';
      this.bodyData = DESUtil.des_decrypt(this.text, this.key).log;
    },
    desEncrypt: function (text, key) {
      this.cipher = DESUtil.des_encrypt(text, key).cipher;
    },
    desDecrypt: function (cipher, key) {
      this.plaintext = DESUtil.des_decrypt(cipher, key).plaintext;
    },
    clearInput: function () {
      this.text = null;
      this.key = null;
    },
  }
}
</script>

<style scoped>
button {
  text-decoration: none;
  outline: none;
}

textarea {
  width: 100%;
  height: 100px;
  padding: 10px;
  outline: none;
  resize: none;
  border-radius: 5px;
  border: 0;
  box-shadow: #a9dede 0 1px 4px;
}

input {
  width: 100%;
  height: 24px;
  padding: 6px;
  outline: none;
  resize: none;
  border-radius: 5px;
  border: 0;
  box-shadow: #a9dede 0 0 4px;
}

.container {
  display: flex;
}

.body {
  padding-top: 20px;
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bodyTitle {
  width: 100%;
  height: 60px;
  font-size: 26px;
  font-weight: 400;
  display: flex;
  justify-content: center;
  color: #6A75CA;
}

.box {
  width: 50vw;
}

.item {
  display: flex;
  align-items: center;
  width: 50vw;
  margin-bottom: 3px;
  padding: 15px 20px;
}

.itemText {
  width: 30%;
  color: #4e4e4e;
}

.itemValue {
  width: 70%;
}

.itemTitle {
  display: flex;
  font-size: 19px;
  font-weight: 550;
  padding-bottom: 10px;
  color: rgb(0, 43, 136);
}

.emptyLine {
  height: 5%;
  width: 100%;
  background-color: rgb(238, 241, 248);
}


</style>
